import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import Lottie from 'lottie-react-web';
import Flybird from './json/flybird.json';

import styles from './index.less';

// const require: any = (window as any).require;
const { Title, Paragraph, Text } = Typography;

interface State {
  lottieControl: {
    isPaused?: boolean; //是否暂停
    speed: number; //速度
  };
  collectionList: any[];
}

export default class Index extends Base<any, State> {
  public state: State = {
    lottieControl: {
      isPaused: false,
      speed: 1,
    },
    collectionList: [],
  };

  public async didShow() {}

  public async didMount() {
    this.init();
  }

  public render() {
    const { lottieControl, collectionList } = this.state;
    return (
      <Card title="">
        <div className={styles.top}>
          <Lottie
            ref={(res) => (this.refLottie = res)}
            width={160}
            height={160}
            isPaused={lottieControl.isPaused}
            speed={lottieControl.speed}
            options={{
              animationData: Flybird,
            }}
          />
          <div>速度： {lottieControl.speed}</div>
          <Slider
            min={0}
            max={3}
            step={0.1}
            style={{ width: '200px' }}
            value={lottieControl.speed}
            onChange={this.handelControlChange.bind(null, 'speed')}
          ></Slider>
          <div className={styles.controlBox}>
            <Button
              type="danger"
              className={styles.btn}
              onClick={() => {
                this.refLottie.stop();
              }}
            >
              停止
            </Button>

            <Button
              type="primary"
              className={styles.btn}
              onClick={() => {
                this.refLottie.play();
              }}
            >
              播放
            </Button>

            <Button
              className={styles.btn}
              onClick={() => {
                this.handelControlChange('isPaused', !lottieControl.isPaused);
              }}
            >
              {lottieControl.isPaused ? '继续' : '暂停'}
            </Button>
          </div>
        </div>

        <Divider />

        <Typography>
          <Title>Examples</Title>
        </Typography>
        <Row gutter={16}>
          {collectionList.map((res) => (
            <Col span={6} key={res.name} className={styles.col}>
              <div className={styles.box}>
                <Lottie width={'100%'} height={200} options={res.data} />
              </div>
            </Col>
          ))}
        </Row>

        <Divider />

        <Typography>
          <Title>Docs</Title>
          <Paragraph>
            <p>
              官网：
              <a href="http://airbnb.io/lottie/#/README" target="_blank">
                http://airbnb.io/lottie/#/README
              </a>
            </p>
            <p>
              语雀中文文档：
              <a
                href="https://www.yuque.com/lottie/document/readme"
                target="_blank"
              >
                https://www.yuque.com/lottie/document/readme
              </a>
            </p>
            <p>
              React版GitHub：
              <a
                href="https://github.com/felippenardi/lottie-react-web"
                target="_blank"
              >
                https://github.com/felippenardi/lottie-react-web
              </a>
            </p>
          </Paragraph>
          <Title level={3}>动画制作方法</Title>
          <Paragraph>
            <Text>Adobe After Effects 并安装插件bodymovin；</Text>
            <Text>
              {
                '做好动画后，依次选择“窗口”–>“扩展”–>“bodymovin”，打开bodymovin面板，选中Selected下的圆框，选择导出位置，然后点击Render进行渲染导出json格式文件'
              }
            </Text>
          </Paragraph>
        </Typography>
      </Card>
    );
  }
  private refLottie: any = null;

  private handelControlChange = (key, val) => {
    // console.log('???', key, val);return;
    let value = val;
    if (val.target) {
      value = val.target.value;
    }
    const { lottieControl } = this.state;
    this.setState({
      lottieControl: {
        ...lottieControl,
        [key]: value,
      },
    });
  };

  private init = () => {
    const files = require.context('./json', false, /.json$/).keys();
    // console.log('init??', files)
    let array: any = [];
    files.map((res) => {
      let name = res.split('./')[1];
      let dt = require('./json/' + name);
      array.push({
        name,
        data: {
          animationData: dt,
        },
      });
    });
    // console.log('init??', array)
    this.setState({
      collectionList: array,
    });
  };
}
